<template>
	<view class="district" id="district" :style="{'background': diyConfig.home_page_bg_color}">
		<view class="nav-bar-class">
			<uni-nav-bar :backgroundColor="diyConfig.home_title_bg_color" height="128rpx" class="nav-bar" :border="false" :color="diyConfig.home_title_color"
				@clickLeft="goBack" fixed statusBar :title="diyConfig.home_title"></uni-nav-bar>
			<view class="search-part" :style="{'background':diyConfig.home_title_bg_color}">
				<view class="search-main flex-cn-cn" @click.stop="goStoreListPage(3,'')">
					<text>搜索门店</text>
					<uni-icons type="search" style="margin-top:6rpx"></uni-icons>
				</view>
			</view>
		</view>
		<view class="scroll-view-box">
			<scroll-view :scroll-top="scrollTop" :refresher-enabled="true" :refresher-threshold="50" :show-scrollbar="false" scroll-anchoring scroll-y="true"
				class="scroll-district" @scrolltolower="lower" :refresher-triggered="isRefresh" @refresherrefresh="freshData" @scroll="scroll"
				enable-back-to-top>
				<view class="part-one" id="partOne">
					<!-- banner图 -->
					<view class="banner-class" :style="{'background': diyConfig.home_rotation_bg_color}" v-if="swiperList && swiperList.length > 0">
						<swiper class="swiper-banner" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500" circular>
							<swiper-item v-for="item in swiperList" :key="item.id">
								<view class="swiper-item">
									<image mode="scaleToFill" :src="item.image" @click="goStorePage('swiper', item)">
									</image>
								</view>
							</swiper-item>
						</swiper>
					</view>

					<!-- 分类导航 -->
					<view class="class-navigation" :style="{'background': diyConfig.home_nav_bg_color}" v-if="classList && classList.length > 0">
						<swiper class="swiper-navigation" :style="{height: classList[0].length > 5 ? '360rpx' : '180rpx'}" :autoplay="false"
							@change="changeSwiper">
							<swiper-item v-for="(item, index) in classList" :key="index">
								<div class="grid-item">
									<uni-grid :column="5" :showBorder="false" :square="false" class="grid-class">
										<uni-grid-item class="grid-item-class" :index="Number(el.id)" v-for="el in item" :key="el.id">
											<view class="icon-class flex-cn-cn" @click="goStoreListPage(1, el.id)">
												<view class="icon-content">
													<image class="icon-image" mode="scaleToFill" :src="el.image">
													</image>
												</view>
												<text :style="{'color':diyConfig.home_nav_txt_color}">{{el.name}}</text>
											</view>
										</uni-grid-item>
									</uni-grid>
								</div>
							</swiper-item>
						</swiper>
						<view class="dots">
							<block v-for="(element, index) in classList.length" :key="index">
								<view :class="['dot', index == currentIndex ? 'active' : '']"></view>
							</block>
						</view>
					</view>

				</view>
				<!-- 商圈内容 -->
				<view class="part-two" v-if="districtList && districtList.length > 0">
					<view class="distract-class" v-for="(item, index) in districtList" :key="index">
						<!-- 标题 -->
						<view class="distract-title flex-spb-cn" :style="{'background': item.bg_color}">
							<view class="title-left flex-cn" :style="{'color':item.title_color}">
								<view class="iconfont iconpinpai" :style="{'color':item.title_color}"></view>
								<text style="font-weight: 700;font-size: 32rpx;">{{item.name}}</text>
								<text style="margin: 0 14rpx">|</text>
								<text style="font-size: 24rpx;">{{item.tips}}</text>
							</view>
						</view>
						<view class="distract-content" :style="{'background': diyConfig.home_trade_area_bg_color}">
							<!-- 广告 -->
							<view class="advertise-class" @click="goStorePage('adv', item)">
								<image :src="item.adv_image" mode=""></image>
							</view>
							<!-- 店铺 -->
							<view class="store-class" v-if="item.store_list.length>0">
								<uni-grid :column="4" :showBorder="false" :square="false" class="grid-class" :highlight="false">
									<uni-grid-item class="store-item-class" :index="el.value" v-for="el in item.store_list" :key="el.store_id">
										<view class="icon-class" @click="goStore(el.store_id)">
											<view class="icon-content" style="border-radius: 10rpx;">
												<image class="icon-image" mode="scaleToFill" :src="el.shop_img">
												</image>
											</view>
											<text :style="{'color': diyConfig.home_trade_area_txt_color}">{{el.store_name}}</text>
										</view>
									</uni-grid-item>
									<uni-grid-item v-if="item.store_list.length > 6" class="store-item-class">
										<view class="icon-class" hover-class="none" @click="goStoreListPage(2, item.id)">
											<view class="icon-content flex-cn-cn" style="border-radius: 10rpx;">
												<image style="width:100rpx;height:100rpx" src="../../static/images/view-more.png"></image>
											</view>
											<text :style="{'color': diyConfig.home_trade_area_txt_color}">全部门店</text>
										</view>
									</uni-grid-item>
								</uni-grid>
							</view>
						</view>
					</view>
					<view class="flex-cn-cn">
						<view v-if="districtList && districtList.length == 0 && !isLoading" class="flex-cn-cn bottom-message">
							<view class="line"></view>
							<text class="mar_l_10 mar_r_10">暂无数据</text>
							<view class="line"></view>
						</view>
						<view v-if="canLoad && isLoading" class="bottom-message flex-cn-cn">加载中...</view>
						<view v-if="!canLoad && !isLoading" class="flex-cn-cn bottom-message">
							<view class="line"></view>
							<text class="mar_l_10 mar_r_10">到底了</text>
							<view class="line"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="go-top" v-if="isShowBackTop" @click="goTop">
			<text class="iconfanhui iconfont icon-back"></text>
		</view>
	</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				//轮播图列表
				swiperList: null,
				// 导航列表
				classList: null,
				// 商圈列表
				districtList: null,
				currentIndex: 0, // 导航index
				page: 1, // 商圈列表当前页
				limit: 10, // 商圈页大小
				canLoad: true, // 是否可以加载数据
				isLoading: false, // 加载数据loading
				isRefresh: false, // 是否正在刷新
				isShowBackTop: false, // 是否显示回到顶部按钮
				scrollTop: 10, // 顶部距离
				scrollPosition: 0, // 滚动条位置--由于绑定scrollTop滚动时避免直接赋值导致滚动抖动,使用变量赋值
				diyConfig: null, // diy配置
			}
		},
		methods: {
			// 获取轮播图列表
			async getRotation() {
				const {
					status,
					data
				} = await this.$request('MallPreview/Mini/getRotation', {}, false)
				if (status == 1) {
					this.swiperList = data
				}

			},

			// 获取商圈自定义颜色文字
			async getDistrictDiy() {
				const {
					status,
					data
				} = await this.$request('MallPreview/Mini/getConf', {}, false)
				if (status == 1) {
					this.diyConfig = data
				}
			},

			// 轮播图/导航跳转门店
			goStorePage(type, item) {
				let url_path = type == 'swiper' ? item.path.split('?')[0] : item.adv_path.split('?')[0]
				let store_id = type == 'swiper' ? (item.path.split('?')[1]).split('=')[1] : (item.adv_path.split('?')[1])
					.split('=')[1]
				let pageList = [
					'/pages/newClassify/newClassify', 
					'/pages/store/store',
					'/pages/myOrder/myOrder',
					'/pages/my/my',
					'/pages/shoppingCar/shoppingCar'
				]
				if (pageList.indexOf(url_path) > -1) {
					this.$store.begin_store_id = store_id;
					uni.navigateTo({
						url: url_path
					})
				} else {
					uni.navigateTo({
						url: type == 'swiper' ? item.path : item.adv_path
					})
				}
			},

			// 商圈门店跳转门店首页
			goStore(id) {
				this.$store.begin_store_id = id;
				uni.navigateTo({
					url: '/pages/store/store'
				})
			},

			// 跳转门店列表
			goStoreListPage(type, id) {
				uni.navigateTo({
					url: '/pages/district/storeList?type=' + type + '&id=' + id,
				})
			},


			// 获取导航列表
			async getNavitionList() {
				const {
					status,
					data
				} = await this.$request('MallPreview/Mini/getNavigation', {}, false)
				if (status == 1) {
					this.classList = this.spArr(data, 10)
				}
			},

			// 分割数组
			spArr(arr, num) { //arr是你要分割的数组，num是以几个为一组
				let newArr = [] //首先创建一个新的空数组。用来存放分割好的数组
				for (let i = 0; i < arr.length;) { //注意：这里与for循环不太一样的是，没有i++
					newArr.push(arr.slice(i, i += num));
				}
				return newArr
			},

			// 切换导航
			changeSwiper(e) {
				this.currentIndex = e.detail.current
			},

			// 获取商圈列表
			async getTradeArea() {
				if (!this.canLoad || this.isLoading) return false;
				this.isLoading = true
				const {
					status,
					data
				} = await this.$request('MallPreview/Mini/getTradeArea', {
					page: this.page,
					limit: this.limit
				}, false)
				if (status == 1) {
					this.canLoad = data.length >= this.limit
					if (this.page == 1) {
						this.districtList = data
					} else {
						this.districtList = [...this.districtList, ...data]
					}
					this.isLoading = false
				}
			},

			lower(e) {
				if (this.canLoad) {
					this.page++
					this.getTradeArea()
				}
			},

			// 滚动事件
			scroll(e) {
				if (e.detail.scrollTop > 2000) {
					this.isShowBackTop = true
					this.scrollPosition = e.detail.scrollTop
				} else {
					this.isShowBackTop = false
				}
			},

			// 返回顶部
			goTop() {
				this.scrollTop = this.scrollPosition
				setTimeout(() => {
					this.isShowBackTop = false
					this.scrollTop = 0
				})
			},

			// 下拉刷新
			async freshData() {
				this.isRefresh = true
				this.isLoading = false
				this.canLoad = true
				this.page = 1
				await this.getDistrictDiy()
				await this.getRotation()
				await this.getNavitionList()
				await this.getTradeArea()
				this.isRefresh = false
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			},



		},

		async onLoad() {
			// #ifdef MP-ALIPAY
			my.hideBackHome();
			// #endif
			await this.$onLaunched;
			await this.getDistrictDiy()
			await this.getRotation()
			await this.getNavitionList()
			await this.getTradeArea()
		},

		onShareAppMessage() {
			return {
				title: this.diyConfig.home_title,
			};
		},

		onShareTimeline(res) {
			return {
				title: this.diyConfig.home_title,
			}
		},

	}
</script>
<style>
	page {
		padding-bottom: 0 !important;
	}
</style>
<style lang="less" scoped>
	.grid-class {
		.grid-item-class {
			/deep/.uni-grid-item {
				.uni-highlight:active {
					background-color: transparent;
				}
			}
		}
	}

	.go-top {
		position: absolute;
		bottom: 100rpx;
		right: 50rpx;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		line-height: 70rpx;
		background-color: #ccc;
		transform: rotate(-90deg);
		display: flex;
		justify-content: center;
		align-items: center;

		.icon-back {
			font-size: 26rpx;
			color: #fff;
		}
	}

	.flex-cn-cn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex-spb-cn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-cn {
		display: flex;
		align-items: center;
	}

	.district {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #F5F5F5;

		.nav-bar-class {
			.search-part {
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.search-main {
					width: 100%;
					height: 70rpx;
					background-color: #fff;
					border-radius: 35rpx;
					color: #666;
					font-size: 28rpx;

					text {
						margin-right: 10rpx;
					}


				}
			}
		}

		.scroll-view-box {
			flex: 1;
			width: 100%;
			overflow: hidden;
		}

		.scroll-district {
			width: 100%;
			height: 100%;
		}


		.icon-class {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			&:active {
				background: transparent;
			}

			text {
				color: #333;
			}

			.icon-content {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 30rpx 0 16rpx 0;

				.icon-image {
					width: 100%;
					height: 100%;
				}

			}

			text {
				font-size: 24rpx;
			}
		}

		.part-one {
			// padding: 12rpx 0 0 12rpx;
			// background-color: #fff;
			padding-top: 10rpx;

			.banner-class {
				height: 322rpx;
				padding: 0 12rpx;
			}

			.swiper-banner {
				height: 100%;
				overflow: hidden;

				.swiper-item {
					width: 100%;
					height: 100%;
					border-radius: 10px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.class-navigation {
				padding: 0 10rpx 30rpx 10rpx;
				position: relative;
				margin: 18rpx 0;

				.swiper-navigation {
					height: 360rpx;
				}

				.grid-item {
					height: 100%;
				}

				.dots {
					position: absolute;
					left: 0;
					right: 0;
					bottom: 10rpx;
					display: flex;
					justify-content: center;
				}

				.dots .dot {
					margin: 0 10rpx;
					width: 10rpx;
					height: 10rpx;
					background: #ccc;
					border-radius: 50%;
					transition: all .6s;
				}

				.dots .dot.active {
					width: 10rpx;
					background: #333;
				}
			}


		}

		.part-two {
			.distract-class {
				margin-top: 20rpx;
				// background-color: #fff;

				.distract-title {
					height: 82rpx;
					padding: 0 32rpx;

					.title-left {}

					.title-right {
						font-size: 20rpx;

						text {
							margin-right: 10rpx
						}
					}
				}

				.distract-content {
					padding: 0 32rpx 0 32rpx;

					.advertise-class {
						height: 200rpx;
						padding: 20rpx 0;
						border-radius: 16rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.store-class {
						padding-bottom: 10rpx;
					}

				}
			}

			.bottom-message {
				color: #ccc;
				font-size: 24rpx;
				// background-color: #fff;
				width: 100%;
				padding: 10rpx 0;
			}

			.line {
				width: 40%;
				height: 1px;
				background-color: #ccc;
			}
		}
	}
</style>
